<template>
	<view class="suggest">
		<view class="suggest-describe">
			<view class="type">
				<view class="type-text">问题类型</view>
				<view class="type-text" @click="selectType">
					<view class="type-state">AI问题</view>
					<uni-icons type="forward" size="14"></uni-icons>
				</view>
			</view>
			<view class="line"></view>
			<view class="describe">
				<view class="describe-text">问题描述</view>
				<uni-easyinput
					type="textarea"
					autoHeight
					v-model="content"
					placeholder="请详细描述您所遇到的问题"
					placeholder-style="fontSize: 28rpx"
				></uni-easyinput>
			</view>
			<!-- <view class="describe-img">
				<view class="img-text">请提供相关问题的照片</view>
				<view class="img-sub">
					附件大小不得超过8M,附件支持格式有：jpg,jpeg,png,bmp,txt,rar,zip,doc,docx,pdf,xlsx,xls
				</view>
				<u-upload
					:fileList="fileList1"
					@afterRead="afterRead"
					@delete="deletePic"
					name="1"
					multiple
					:maxCount="10"
				></u-upload>
				</u-upload>
			</view> -->
		</view>
		<view class="suggest-btn">
			<button class="btn" @click="submitSuggest">提交</button>
		</view>
		
		<uni-popup ref="popup" background-color="#fff" border-radius="16rpx 16rpx 0 0">
			<view class="popup-content">
				<view class="order-type">
					<view class="type-text">订单类型</view>
					<view class="type-list">
						<view
							class="type-item"
							v-for="(item,index) in typeList"
							:key="index"
							:class="{ active: tradeType === index }"
							@click="selecType(item, index)"
						>{{ item.text }}</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { WorkAdd } from '@/api/wallet.js'
	export default {
		data() {
			return {
				src: '',
				content: '',
				problemType: '功能异常',
				type: 12,
				fileList1: [],
				typeList: [
					{ text: 'AI问题', type: 12 }
				],
				tradeType: '',
				imgList: []
			}
		},
		methods: {
			selectType() {
				this.$refs.popup.open('bottom')
			},
			async submitSuggest() {
				if(!uni.getStorageSync('apiticket')){
					uni.showModal({
						title: "提示",
						content: "请先登录",
						success(res) {
							if(res.confirm){
								setTimeout(() => {
									uni.navigateTo({
										url: "/pages/login/index",
									})
								}, 1000);
							}
						},
					});
					return
				}
				
				if(this.content == '') {
					uni.showToast({
						title: '请输入你遇到的问题',
						duration: 2000,
						icon: 'none'
					});
				} else {
					const data = {
						catid: this.type,
						content: this.content,
						email: ''
					};
					WorkAdd(data).then(work => {
						console.log('work', work);
						if(work.errcode && work.errcode != '200') {
							uni.showToast({
								title: work.errmsg,
								duration: 2000,
								icon: 'none'
							})
							return
						}
						uni.showToast({
							title: '您已成功创建工单',
							duration: 2000,
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}).catch(err => {
						uni.showToast({
							title: '失败，请重试',
							duration: 2000,
							icon: 'none'
						})
					})
					
				}
			},
			toggle(type) {
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			selecType(item,index) {
				this.tradeType = index;
				this.problemType = item.text;
				this.type = item.type;
				this.$refs.popup.close();
			},
			
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				this.imgList.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				console.log('this[`fileList${event.name}`]', event)
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					console.log('lists[i].url', lists[i])
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(imageUrl) {
				return new Promise((resolve, reject) => {
					const imgName = imageUrl.substring(11);
					const data = {
						name: imgName
					};
					let pathData = {}
					// 把选择的文件转化为buffer流
					uni.request({
						url: imageUrl,
						method: 'GET',
							responseType: 'arraybuffer', //此处注意不能少
							success: (pathRes) => {
								console.log('pathRes', pathRes)
								pathData = pathRes.data
							}
					})
					console.log('pathData', pathData)
					// 获取上传图片的地址
					getUploadUrl(data).then(res => {
						console.log('res', res);
						const { pathUrl, url } = res;
						this.imgList.push(pathUrl);
						// minio直传
						uni.request({
							url: url,//后端返回的签名地址
							data: pathData , //上传的文件字节流
							method: 'PUT',
							header: {
								'Content-Type': 'application/octet-stream', //此处注意
								'Content-Disposition':'inline'
							},
							success: (minio) => {
								console.log("直传返回", minio);
								setUploadUrl({ url: pathUrl }).then(urlRes => {
									console.log('urlRes', urlRes);
									resolve(urlRes)
								})
							}
						});
					});
					
					// let a = uni.uploadFile({
					// 	url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
					// 	filePath: url,
					// 	name: 'file',
					// 	formData: {
					// 		user: 'test'
					// 	},
					// 	success: (res) => {
					// 		setTimeout(() => {
					// 			resolve(res.data.data)
					// 		}, 1000)
					// 	}
					// });
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.suggest {
		margin: 20rpx 36rpx;
	}
	.suggest-describe {
		background: #fff;
		border-radius: 16rpx;
		padding: 28rpx 32rpx;
		font-size: 32rpx;
		color: #{$one-title-color};
		.type {
			display: flex;
			justify-content: space-between;
			.type-text {
				display: flex;
				align-items: center;
				.type-state {
					color: #{$two-title-color};
					margin-right: 20rpx;
				}
			}
		}
		.describe {
			margin: 20rpx 0;
			.describe-text {
				margin-bottom: 16rpx;
			}
		}
		.img-text {
			margin-bottom: 16rpx;
		}
		.img-sub {
			font-size: #{$auxiliary-size};
			color: #{$sub-color};
			margin-bottom: 20rpx;
		}
	}
	.btn {
		background: #{$main-color};
		border-radius: 50rpx;
		color: #fff;
		margin-top: 120rpx;
	}
	.line {
		border-bottom: 1px solid #f5f5f5;
		margin: 28rpx 0;
	}
	.popup-content {
		padding: 15px;
		height:100%;
		background-color: #fff;
		border-radius: 20rpx;
		.order-type {
			.type-text {
				font-size: #{$one-title-size};
			}
			.type-list {
				display: flex;
				// justify-content: space-around;
				flex-wrap: wrap;
			}
			.type-item {
				flex: 0 0 auto;
				border: 1px solid #999;
				border-radius: 30rpx;
				padding: 0 20rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				color: #999;
				margin: 20rpx 10rpx;
			}
		}
	}
	.active {
		background: #fff !important;
		color: #ff6005 !important;
		border: 1px solid #ff6005 !important;
	}
</style>